<template>
  <div class="show-main">
    <el-scrollbar style="height:100%">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="small">
        <el-form-item label="">
          <el-select v-model="searchForm.store_id" clearable placeholder="请选择店铺名称">
            <el-option v-for="(item) in storeList" :key="item.id" :label="item.shop_name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="searchForm.is_show" clearable placeholder="请选择是否显示">
            <el-option label="不显示" value="0"></el-option>
            <el-option label="显示" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.stop="search(true)">搜索</el-button>
          <el-button type="success" @click.stop="search">刷新</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="table" border size="small">
        <el-table-column prop="id" label="订单ID"></el-table-column>
        <el-table-column prop="order_no" label="订单编号" width="180"></el-table-column>
        <el-table-column prop="shop_name" label="店铺名称"></el-table-column>
        <el-table-column prop="comment" label="评论内容"></el-table-column>
        <el-table-column prop="is_show" label="是否显示">
          <template slot-scope="scope">
            {{scope.row.is_show == 0 ?'隐藏': '显示'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="changeShow(scope.row.id, scope.row.is_show)">修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page"
          :page-sizes="[10,20,30,40]" :page-size="searchForm.limit" layout="total, sizes, prev, pager, next, jumper" :total="count">
        </el-pagination>
      </div>
    </el-scrollbar>
  </div>
</template>
<script>
import { getStoreList, commentList, changeShow } from '@/network/api.js'

export default {
  name: 'comment',
  data() {
    return {
      searchForm: {
        page: 1,
        limit: 10,
        is_show: '',
        store_id: ''
      },
      count: 0, // 总记录数
      table: [],
      storeList: [] // 商户列表
    }
  },
  created() {
    this.search()
  },
  computed: {},
  methods: {
    async search(pageInit = false) {
      try {
        if (pageInit === true) {
          this.searchForm.page = 1
        }
        const storeRtn = await getStoreList({})
        this.storeList = storeRtn.data.list
        // 获取评论信息
        const commentRtn = await commentList(this.searchForm)
        this.table = commentRtn.data.list
        this.count = commentRtn.data.count
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 每页条数变化
    handleSizeChange(val) {
      this.searchForm.limit = val
      this.search()
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.search()
    },
    // 修改是否显示
    async changeShow(id, isShow) {
      const msg = isShow === 0 ? '确定要显示吗?' : '确定要隐藏吗?'
      isShow = isShow === 0 ? 1 : 0
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          try {
            const formdata = {
              id,
              is_show: isShow
            }
            await changeShow(formdata)
            this.search()
          } catch (e) {
            this.$message.error(e.message)
          }
        })
        .catch(() => {})
    }
  }
}
</script>
<style lang="less" scoped>
</style>
